<template>
  <div class="enterpriseInfo">
    <div>
      <div class="title">
        <h1 style="color: #337ECC;font-size: 40px">审核学生信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <TagOutlined class="icon"/>
        </div>


      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 10px">

      <a-form
          ref="formRef"
          :label-col="labelCol"
          :model="formState"
          :rules="rules"
          :wrapper-col="wrapperCol"
      >
        <div class="demo-page-header">
          <a-page-header
              title="审核任务"
          >
            <template #extra>
              <a-button key="1" type="primary" @click="auditYes">通过</a-button>
              <a-button danger type="primary" @click="showModal">拒绝</a-button>
            </template>
            <a-descriptions :column="3" size="small">
              <a-descriptions-item label="">审核如下学生信息的真伪</a-descriptions-item>
            </a-descriptions>
          </a-page-header>
        </div>

        <div>

          <a-modal v-model:open="open" title="审核不通过" ok-text="确认" cancel-text="取消" @ok="handleOk">
            <a-form-item ref="student_certification_refuse" label="原因" name="student_certification_refuse">
              <a-textarea v-model:value="formState.student_certification_refuse"
                          :auto-size="{minRows: 3, maxRows: 20}"
                          show-count
                          style="width: 400px"
              />
            </a-form-item>
          </a-modal>

        </div>


        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">基本信息</a-divider>
        <div class="basic">

          <div class="basicInfo">
            <a-form-item ref="student_name" label="姓名" name="student_name" style="width: 50%">
              <a-input v-model:value="formState.student_name" :bordered="isBordered"  :disabled="!isBordered"/>
            </a-form-item>

            <a-form-item ref="student_age" label="年龄" name="student_age" style="width: 50%">
              <a-input v-model:value="formState.student_age" :bordered="isBordered"  :disabled="!isBordered"/>
            </a-form-item>

            <a-form-item ref="student_sex" label="性别" name="student_sex" style="width: 50%">
              <a-input v-model:value="formState.student_sex" :bordered="isBordered"  :disabled="!isBordered"/>
            </a-form-item>

            <a-form-item ref="student_address" label="地址" name="student_address">
              <a-input v-model:value="formState.student_address" :bordered="isBordered"  :disabled="!isBordered" style="width: 300px"/>
            </a-form-item>

            <a-form-item ref="student_contact" label="电话" name="student_contact">
              <a-input v-model:value="formState.student_contact" :bordered="isBordered"  :disabled="!isBordered"/>
            </a-form-item>

            <a-form-item ref="student_email" label="邮箱" name="student_email">
              <a-input v-model:value="formState.student_email" :bordered="isBordered"  :disabled="!isBordered"/>
            </a-form-item>
          </div>
          <div class="update">
            <a-upload
                v-model:file-list="fileList"
                :before-upload="beforeUpload"
                :disabled="!isBordered"
                :show-upload-list="false"
                action="http://localhost:8080/file/upload"
                class="avatar-uploader"
                list-type="picture-card"
                name="file"
                @change="handleChange"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width: 120px; height: 170px;"/>
              <div v-else>
                <loading-outlined v-if="loading"></loading-outlined>
                <plus-outlined v-else></plus-outlined>
                <div class="ant-upload-text" >Upload</div>
              </div>
            </a-upload>
          </div>
        </div>


        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">教育背景</a-divider>
        <div class="school">

          <a-form-item ref="student_highest_education" label="最高学历" name="student_highest_education">
            <a-select v-model:value="formState.student_highest_education"  :bordered="isBordered"  :disabled="!isBordered" placeholder="请选择最高学历！">
              <a-select-option value="大专">大专</a-select-option>
              <a-select-option value="本科">本科</a-select-option>
              <a-select-option value="硕士">硕士</a-select-option>
              <a-select-option value="博士">博士</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item ref="student_graduation" label="毕业院校"
                       name="student_graduation">
            <a-input v-model:value="formState.student_graduation" :bordered="isBordered"  :disabled="!isBordered"/>
          </a-form-item>

          <a-form-item ref="student_major" label="专业"
                       name="student_major">
            <a-input v-model:value="formState.student_major" :bordered="isBordered"  :disabled="!isBordered"/>
          </a-form-item>

          <a-form-item ref="student_graduation_year" :wrapperCol="{ span: 15 }" label="毕业时间"
                       name="student_graduation_year">
            <a-date-picker v-model:value="formState.student_graduation_year" :bordered="isBordered"  :disabled="!isBordered"/>
          </a-form-item>

          <a-form-item ref="student_gpa" :wrapperCol="{ span: 12 }" label="成绩"
                       name="student_gpa">
            <a-input v-model:value="formState.student_gpa" :bordered="isBordered"  :disabled="!isBordered"/>
          </a-form-item>

          <a-form-item ref="student_campus_experience" :wrapperCol="{ span: 12 }" label="校园经历"
                       name="student_campus_experience">
            <a-textarea v-model:value="formState.student_campus_experience"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="300"
                        show-count
                        style="width: 800px"
            />
          </a-form-item>

          <a-form-item ref="student_honour" label="荣誉奖项" name="student_honour">
            <a-textarea v-model:value="formState.student_honour"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="300"
                        show-count
                        style="width: 800px"
            />
          </a-form-item>
        </div>
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">技能特长</a-divider>
        <div class="school">
          <a-form-item ref="student_skills" :wrapperCol="{ span: 12 }"
                       label="专业技能" name="student_skills">
            <a-textarea v-model:value="formState.student_skills"
                        :auto-size="{minRows: 3, maxRows: 10}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
            />
          </a-form-item>
        </div>
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">实习经历</a-divider>
        <div class="school">
          <a-form-item ref="student_year_work" :wrapperCol="{ span: 12 }" label="实习时间"
                       name="student_year_work">
            <a-input v-model:value="formState.student_year_work" :bordered="isBordered"  :disabled="!isBordered" style="width: auto"/>
          </a-form-item>

          <a-form-item ref="student_internship_company" :wrapperCol="{ span: 12 }" label="实习公司"
                       name="student_internship_company">
            <a-input v-model:value="formState.student_internship_company" :bordered="isBordered"  :disabled="!isBordered"/>
          </a-form-item>

          <a-form-item ref="student_key_responsibilities" label="主要职责" name="student_key_responsibilities">
            <a-textarea v-model:value="formState.student_key_responsibilities"
                        :auto-size="{minRows: 3, maxRows: 20}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="600"
                        show-count
                        style="width: 800px"
            />
          </a-form-item>
        </div>
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">项目经验</a-divider>
        <div class="school">
          <a-form-item ref="student_projects" label="参与项目" name="student_projects">
            <a-textarea v-model:value="formState.student_projects"
                        :auto-size="{minRows: 3, maxRows: 20}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="1000"
                        show-count
                        style="width: 800px"
            />
          </a-form-item>
        </div>
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">自我评价</a-divider>
        <div class="school">
          <a-form-item ref="student_personal" label="个人简介-特长" name="student_personal">
            <a-textarea v-model:value="formState.student_personal"
                        :auto-size="{minRows: 2, maxRows: 20}"
                        :bordered="isBordered"
                        :disabled="!isBordered"
                        :maxlength="600"
                        show-count
                        style="width: 800px "
            />
          </a-form-item>
        </div>
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px">资质审核</a-divider>
        <div class="school">
          <a-form-item ref="student_certification_status" label="审核状态"
                       name="student_certification_status" style="width: 300px">
            <a-input v-model:value="formState.student_certification_status" :bordered="isBordered"
                     :disabled="true"/>
          </a-form-item>
          <div v-show="formState.student_certification_status==='审核不通过'">
            <a-form-item ref="student_certification_refuse" label="拒绝原因"
                         name="student_certification_refuse">
              <a-textarea v-model:value="formState.student_certification_refuse"
                          :auto-size="{minRows: 3, maxRows: 20}"
                          show-count
                          style="width: 500px"
              />
            </a-form-item>
          </div>
          <a-form-item ref="student_name" label="资质文件" name="student_name" style="width: 800px">
            <div class="file-list">
              <div v-for="(file, index) in certificateList" :key="index">
                <a :href="'http://localhost:8080/file/download?name='+file.url" download>{{ file.name }}</a>
              </div>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import {CopyOutlined, SmileOutlined, TagOutlined} from "@ant-design/icons-vue";
import {computed, h, onMounted, reactive, ref, toRaw} from 'vue';
import {useUserStore} from "@/stores/user.js";
import {message, notification} from "ant-design-vue";
import moment from "moment";
import {useRoute, useRouter} from "vue-router";
import {queryStudentByIdAPI, updateStudentByIdAPI} from "@/apis/student.js";
const rules = {
  student_certification_refuse: [
    {
      required: true,
      message: '请输入不通过原因！',
      trigger: 'change',
    },
  ],
}
const formRef = ref();
const certificateList = ref([]);
const formState = reactive({
  studentCertificate:'',
  studentCertificateFile:'',
  student_certification_status:'',
  student_certification_refuse:'',
  student_name: '',
  student_sex: '',
  student_age: '',
  student_contact: '',
  student_email: '',
  student_address: '',
  student_highest_education: '',
  student_campus_experience: '',
  student_graduation: '',
  student_major: '',
  student_graduation_year: '',
  student_gpa: '',
  student_honour: '',
  student_skills: '',
  student_year_work: '',
  student_internship_company: '',
  student_key_responsibilities: '',
  student_projects: '',
  student_personal: '',
  student_imgUrl: '',
  /**
   * 用户账号
   */
  account: '',

  /**
   * 用户角色
   */
  userRole: '',
  studentId: '',
});

const useStore = useUserStore();
const success = (msg) => {
  message.success(msg);
};
//审核传递的参数
const data = ref({studentId: '', student_certification_status: '',student_certification_refuse:''})
//审核通过
const auditYes = async () => {
  data.student_certification_status = "审核通过"
  data.studentId = studentId.value
  console.log("通过" + JSON.stringify(data.value))
  const res = await updateStudentByIdAPI(data);
  if (res.data.flag) {
    success("审核成功");
    // 设置一个定时器，在1秒后刷新页面
    setTimeout(() => {
      router.go(-1); // -1 表示返回上一个页面
    }, 1000); // 1000毫秒 = 1秒
  } else {
    console.log('error submit!', toRaw(formState));
  }
};
//审核不通过
const auditNo = async () => {
  data.student_certification_status = "审核不通过"
  data.student_certification_refuse = formState.student_certification_refuse
  if(data.student_certification_refuse==null||data.student_certification_refuse===''){
    notification.error({
      message: '请输入不通过原因！',
      description:
          '请输入不通过原因！',
      duration: 3,
    });
  }else {
    open.value = false;
    data.studentId = studentId.value
    const res = await updateStudentByIdAPI(data);
    if (res.data.flag) {
      success("审核成功");
      // 设置一个定时器，在1秒后刷新页面
      setTimeout(() => {
        router.go(-1); // -1 表示返回上一个页面
      }, 1000); // 1000毫秒 = 1秒
    } else {
      console.log('error submit!', toRaw(formState));
    }
  }

};
//重置后是否刷新
const isRefresh = ref(false);


//控制按钮
const isSave = ref();
const isUpdate = ref(false);//是否修改
const isBordered = ref(false);//是否边框
//获取数据
//获取当前登录用户信息

const getData = async (studentId) => {
  const res = await queryStudentByIdAPI(studentId)
  if (res.data.data == null) {
    isSave.value = true;
  } else {
    isSave.value = false;
  }

  formState.studentCertificate = res.data.data.studentCertificate;
  formState.studentCertificateFile=res.data.data.studentCertificateFile;
  formState.student_certification_status= res.data.data.studentCertificationStatus;
  certificateList.value=res.data.data.studentCertificateFile.split(',').map((file)=>{
    return {
      name: file,
      url: file,
    };
  })


  formState.student_certification_refuse = res.data.data.student_certification_refuse;
  formState.student_name = res.data.data.studentName;
  formState.student_sex = res.data.data.studentSex;
  formState.student_age = res.data.data.studentAge;
  formState.student_graduation_year = moment(res.data.data.studentGraduationYear, 'YYYY-MM-DD');
  formState.student_contact = res.data.data.studentContact;
  formState.student_email = res.data.data.studentEmail;
  formState.student_address = res.data.data.studentAddress;
  formState.student_highest_education = res.data.data.data;
  formState.student_campus_experience = res.data.data.student_campus_experience;
  formState.student_imgUrl = res.data.data.studentImgurl;
  formState.student_graduation = res.data.data.studentGraduation;
  formState.student_major = res.data.data.studentMajor;
  formState.student_gpa = res.data.data.studentGpa;
  formState.student_honour = res.data.data.studentHonour;
  formState.student_skills = res.data.data.studentSkills;
  formState.student_year_work = res.data.data.studentYearWork;
  formState.student_internship_company = res.data.data.studentInternshipCompany;
  formState.student_campus_experience = res.data.data.studentCampusExperience;
  formState.student_internship_experience = res.data.data.studentInternshipExperience;
  formState.student_key_responsibilities = res.data.data.studentKeyResponsibilities;
  formState.student_projects = res.data.data.studentProjects;
  formState.student_personal = res.data.data.studentPersonal;
  formState.student_work_experience = res.data.data.studentWorkExperience;
  formState.student_work_experience_company = res.data.data.studentWorkExperienceCompany;
  formState.student_work_experience_position = res.data.data.studentWorkExperiencePosition;
  formState.student_work_experience_start_time = moment(res.data.data.studentWorkExperienceStartTime, 'YYYY-MM-DD');
  formState.student_work_experience_end_time = moment(res.data.data.studentWorkExperienceEndTime, 'YYYY-MM-DD');
  formState.student_work_experience_description = res.data.data.studentWorkExperienceDescription;

  //获取图片
  imageUrl.value = "http://localhost:8080/file/download?name=" + res.data.data.studentImgurl;
  console.log(imageUrl.value)

}

//接收路由参数
const route = useRoute()
const studentId = ref();
//生命周期
onMounted(() => {

  studentId.value = route.params.studentId;
  formState.studentId = studentId.value;
  getData(studentId.value);

});

//上传照片
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
const handleChange = info => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, base64Url => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
    formState.student_logo_url = fileList.value[0].response.data;
    console.log(formState.student_logo_url)

  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};
const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const openNotification = () => {
  notification.open({
    message: '温馨提示！！！',
    description:
        '点击输入框或照片均可进行修改',
    icon: () =>
        h(SmileOutlined, {
          style: 'color: red',
        }),
  });
};

const router = useRouter();
const goBack = () => {
  router.go(-1); // -1 表示返回上一个页面
}
const cancel = () => {
  isSave.value = false;
  isUpdate.value = false;
  isBordered.value = false;
  if (isRefresh.value) {
    // 设置一个定时器，1秒（1000毫秒）后执行页面刷新
    setTimeout(function () {
      location.reload(); // 刷新当前页面
    }, 500);
  }
}


//审核模块
const ghost = ref(false);

//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.student_foundation_date);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});

//拒绝通知框
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const handleOk = e => {
  console.log(e);
  auditNo(); // 调用 auditNo 方法
};


</script>
<style lang="scss" scoped>

.enterpriseInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //border-bottom: 15px solid #4D7181;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

  .basic {
    display: flex;
    padding-left: 30px;
    justify-content: space-between;

    .basicInfo {
      width: 70%;
      height: 100%;
      display: flex;
      flex-wrap: wrap; /* 允许子元素换行 */
      gap: 0 30px; /* 设置水平间距为10px，垂直间距为0 */
    }

    .update {
      margin-right: 100px;
    }
  }

  .school {
    width: 100%;
    padding-left: 30px;
    //justify-content: space-between;
    display: flex;

    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 0 30px; /* 设置水平间距为10px，垂直间距为0 */
  }

  .update {
    margin-right: 100px;
    width: auto;
    height: 170px;
    //padding: 33px;
    //border: 1px solid #ccc;
  }

  :deep(.ant-upload-wrapper .ant-upload-disabled) {
    height: 170px;
    width: auto;
  }

  :deep(.ant-upload .ant-upload-disabled) {
    height: 170px;
    width: auto;
  }

  :deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select) {
    height: 170px;
    width: auto;
  }

  :deep(.ant-upload .ant-upload-disabled) {
    height: 170px;
    width: auto;
  }
}


//.ant-upload-select-picture-card i {
//  font-size: 32px;
//  color: #999;
//}
//
//.ant-upload-select-picture-card .ant-upload-text {
//  margin-top: 8px;
//  color: #666;
//}
</style>
